<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .list{
            width: 520px;
            /* height: 300px; */
            /* display: flex; */
        }
        .title{
            width: 300px;
            height: 80px;
        }
        .img{
            margin-right: 10px;
        }
        .data{
            color:rgb(248, 10, 10);
        }
        .price{
            width: 200px;
            height: 50px;
        }
        input{
            width: 200px;
        }
        #app{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }
        .color{
            color:blueviolet
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="list" v-for="item in list">
            <img width="200" height="200" v-bind:src="item.image" alt="" srcset="">
            <div class="list_txt">
                <div class="title">{{item.name}}</div>
                <div class="data">库存：{{item.data - item.sum}}</div>
                <div class="price">价格：{{item.price}}</div>
            </div>
            <input type="text" v-model="item.sum">
        </div>

        <h3>待付款：<span>{{getprice}}元</span></h3>




    </div>
    

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        Vue.createApp({
            data(){
                return{
                    list:[
                       {id:1,name:"玲娜贝儿",data:100,sum:null,price:"222",image:"https://img1.baidu.com/it/u=3392159450,3460667413&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667"},
                       {id:2,name:"星黛露",data:100,sum:null,price:"212",image:"https://img2.baidu.com/it/u=3581692224,2220231004&fm=253&fmt=auto&app=138&f=JPEG?w=507&h=500"},
                       {id:3,name:"可琦安",data:100,sum:null,price:"223",image:"https://img1.baidu.com/it/u=1043168055,1642188520&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501"}
                    ],
                    price:0,
                    color:"color",

                }
            },
            //计算属性用来计算需要多少钱
            computed:{
                //用来计算共要多少钱
                getprice(){
                    let sum=null
                    this.list.forEach(a => {
                        if (a.sum<=100) {
                            sum +=(a.sum * a.price)
                        }
                    });
                    return sum;
                }
            },
            watch:{
                //对数组相同属性监听
                list:{
                    //启动深度监听
                    deep:true,
                    
                    hander(newVal,oldVal){
                        //监听的是数组需要循环
                        for (let i = 0; i < this.list.length; i++) {
                           //判断用户输入框输入是否超过 库存100
                           if (newVal[i].sum>=100) {
                            this.list[i].sum=100
                            // console.log(123);
                           }
                        }
                    }
                }
            }
        }).mount("#app")
    </script>
</body>
</html>